<template>
  <v-app>
    <!-- App Bar -->
    <v-app-bar color="black" dense dark app>
      <v-toolbar-title style="font-family: Verdana, Geneva, Tahoma, sans-serif;">
        服务预约
      </v-toolbar-title>
      
      <v-spacer></v-spacer>
      
      <!-- Navigation Buttons -->
      <v-btn depressed style="margin-right: 10px; font-family:'Courier New', Courier, monospace" @click="jumpToPreaserve">
        预约服务
        <v-icon>mdi-access-point</v-icon>
      </v-btn>
      
      <v-btn depressed style="margin-right: 10px; font-family:'Courier New', Courier, monospace" @click="jumpToMemoryShop">
        记录商城
        <v-icon>mdi-store</v-icon>
      </v-btn>
    
      <v-btn depressed style="margin-right: 10px; font-family:'Courier New', Courier, monospace"  @click="jumpToLivingDocument">
        生命档案
        <v-icon>mdi-file-document</v-icon>
      </v-btn>
      <v-btn depressed class="mr-2" style="font-family:'Courier New', Courier, monospace; " @click="jumpToPersonalCenter">
        个人中心
        <v-icon>mdi-home</v-icon>
      </v-btn>
      
      <!-- Login Menu -->
      <v-menu offset-y>
        <template v-slot:activator="{ on, attrs }">
          <v-btn color="primary" dark v-bind="attrs" v-on="on" class="ml-4">
            login/quit
          </v-btn>
        </template>
        <v-list>
          <v-list-item>
            <v-btn color="secondary" dark block>修改密码</v-btn>
          </v-list-item>
          <v-list-item>
            <v-btn color="warning" dark block @click="quitLogin">退出登录</v-btn>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>

    <!-- Main Content -->
    <v-main>
      <v-container>
        <!-- First Row - Transportation Service -->
        <v-row justify="center" class="mt-12 mb-12">
          <v-col cols="12" md="6">
            <v-card elevation="12" class="pa-6">
              <p class="text-h6 mb-4">接送服务</p>
              <v-form ref="form" v-model="valid" lazy-validation>
                <v-text-field
                  v-model="name"
                  :counter="10"
                  :rules="nameRules"
                  label="服务地址"
                  required
                ></v-text-field>
                <v-text-field
                  v-model="email"
                  :rules="emailRules"
                  label="预约时间 请输入:xxxx-xx-xx"
                  required
                ></v-text-field>
                <v-select
                  v-model="select"
                  :items="items"
                  :rules="[v => !!v || 'Item is required']"
                  label="车型选择"
                  required
                ></v-select>
                <v-checkbox
                  v-model="checkbox"
                  :rules="[v => !!v || 'You must agree to continue!']"
                  label="Do you agree?"
                  required
                ></v-checkbox>
                <div class="d-flex justify-space-between mt-4">
                  <v-btn :disabled="!valid" color="success" @click="validate">确认</v-btn>
                  <v-btn color="error" @click="reset">清空表单</v-btn>
                  <v-btn color="warning" @click="resetValidation">重新验证</v-btn>
                </div>
              </v-form>
            </v-card>
          </v-col>
        </v-row>

        <!-- Second Row - Memorial Room -->
        <v-row justify="center" class="mb-12">
          <v-col cols="12" md="8">
            <v-card elevation="24">
              <v-system-bar lights-out></v-system-bar>
              <v-carousel
                cycle
                height="300"
                hide-delimiter-background
                show-arrows-on-hover
              >
                <v-carousel-item
                  v-for="(item, i) in picture"
                  :key="i"
                  :src="item.src"
                  cover
                >
                  <div class="carousel-title">{{ item.title }}</div>
                </v-carousel-item>
              </v-carousel>
              <v-list two-line>
                <v-list-item>
                  <v-list-item-content>
                    <v-list-item-title class="text-h6">选择您的套房类型</v-list-item-title>
                  </v-list-item-content>
                  <v-list-item-action>
                    <v-btn :disabled="!valid" color="success" @click="validate2">确认</v-btn>
                  </v-list-item-action>
                </v-list-item>
              </v-list>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>

    <!-- Footer -->
    <v-footer dark padless>
      <v-card flat tile class="indigo lighten-1 white--text text-center" width="100%">
        <v-card-text>
          <v-btn v-for="icon in icons" :key="icon" class="mx-4 white--text" icon>
            <v-icon size="24px">{{ icon }}</v-icon>
          </v-btn>
        </v-card-text>

        <v-card-text class="white--text pt-0">
          <v-container>
            <v-row>
              <v-col cols="12" md="4" class="text-left">
                关于我们：我们致力于给每个宠物温馨的归宿
              </v-col>
              <v-col cols="12" md="4">
                服务时间：周一到周五 9：00-21：00
              </v-col>
              <v-col cols="12" md="4" class="text-right">
                联系我们：服务热线 029-87659021
              </v-col>
            </v-row>
          </v-container>
        </v-card-text>

        <v-divider></v-divider>

        <v-card-text class="white--text">
          {{ new Date().getFullYear() }} — 宠物生命纪念馆 All Rights Reserved
        </v-card-text>
      </v-card>
    </v-footer>
     <!-- Loading Overlay -->
     <v-overlay :value="isLoading" color="black">
      <v-progress-circular indeterminate size="64" color="primary"></v-progress-circular>
    </v-overlay>
  </v-app>
</template>

<script>
export default {
  data: () => ({
    valid: true,
    name: '',
    nameRules: [
      v => !!v || 'Name is required',
      v => (v && v.length <= 10) || 'Name must be less than 10 characters',
    ],
    email: '',
    emailRules: [
      v => !!v || 'E-mail is required',
      v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
    ],
    select: null,
    items: ['舒适型', '商务型'],
    checkbox: false,
    picture: [
      {
        src: require('@/assets/83ef4d35a8f8364b030c0b7f7dc121a.png'),
        title: '标准纪念房'
      },
      {
        src: require('@/assets/5e4055bc983fbed842b47059f3caf9b.png'),
        title: '豪华纪念房'
      },
    ],
    icons: ['mdi-facebook', 'mdi-twitter', 'mdi-linkedin', 'mdi-instagram'],
    isLoading:false,
    loading:true,
  }),

  methods: {
    async validate() {
      const isValidate=this.$refs.form.validate();
      if(!isValidate) return;

      const formData={
        name:this.name,
        eamil: this.eamil,
        select :this.select,
        checkbox: this.checkbox
      };
      try{
        this.isLoading=true;
        const response=await axios.post("http://localhost:8081/sendPreserveMessage",formData);
        console.log("success",response.data);
        alert("form submit success!")
      }catch(error){
        console.error(error);
      }finally{
        this.isLoading=false;
      }
    },
    reset() {
      this.$refs.form.reset()
    },
    resetValidation() {
      this.$refs.form.resetValidation()
    },
    reserve() {
      this.loading = true;
      setTimeout(() => (this.loading = false), 2000);
    },
    jumpToPreaserve() {
      this.isLoading = true; 
      setTimeout(() => {
        // this.$router.push('/preserve'); 
        this.isLoading = false; 
      }, 1000); 
    },
    jumpToMemoryShop(){
      this.isLoading=true;
      setTimeout(()=>{
        this.$router.push('/memory');
        this.isLoading =false;
      },1000);
    },
    jumpToLivingDocument(){
      this.isLoading=true;
      setTimeout(()=>{
        this.$router.push('/memory');
        this.isLoading =false;
      },1000);
    },
    jumpToPersonalCenter(){
      this.isLoading=true;
      setTimeout(()=>{
        this.$router.push('/center');
        this.isLoading =false;
      },1000);
    },
    quitLogin(){
      this.isLoading=true;
      setTimeout(()=>{
        this.$router.push('/login');
        this.isLoading =false;
      },1000);
    },
  },
}
</script>

<style>
.carousel-title {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  color: white;
  text-align: center;
  font-size: 1.5em;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
}
</style>